<template>
  <div>
    <!-- 面经顶部栏目部分 -->
    <van-nav-bar fixed placeholder>
      <template #left>
        <van-tabs v-model="active" @change="Articlechange">
          <van-tab title="推荐"></van-tab>
          <van-tab title="最新"></van-tab>
        </van-tabs>
      </template>
      <template #right>
        <span class="article-log">面经</span>
      </template>
    </van-nav-bar>
    <!-- 面经列表部分 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="loadMore"
    >
      <!-- 面经列表 -->
      <article-item
        v-for="item in articleList"
        :key="item.id"
        :article="item"
      ></article-item>
    </van-list>
  </div>
</template>

<script>
// 强调 我们接口在article 不在user里面
import { getArticalList } from "../api/article";
export default {
  data() {
    return {
      active: 0,
      current: 1,
      articleList: [],
      loading: true,
      finished: false,
    };
  },
  created() {
    //调用接口，拉取数据
    this.loadArticleList();
  },
  methods: {
    // 由于有多处都需要加载列表数据
    // 所以把获取面经列表封装成方法
    async loadArticleList() {
      // 调用接口
      const res = await getArticalList({
        // 要加载第几页的数据
        current: this.current,
        // 排序
        // active如果为0，就是推荐，否则就是最新
        sorter: this.active === 0 ? "weight_desc" : "",
      });
      console.log(1, res);
      //this.articleList = res.data.data.rows;
      if (this.current === 1) {
        this.articleList = res.data.data.rows;
      } else {
        this.articleList = [...this.articleList, ...res.data.data.rows];
      }
      //判断是否有更多数据
      this.finished = this.current >= res.data.data.pageTotal;
      //关闭加载
      this.loading = false;
    },
    loadMore() {
      this.current++;
      this.loadArticleList();
    },
    Articlechange() {
      this.current = 1;
      this.loadArticleList();
    },
  },
};
</script>

<style scopde>
.article-log {
  font-size: 30px;
  color: #fa6d2b;
  font-weight: 900;
}
</style>